<!DOCTYPE html>
<!--[if IE 8]>
<html lang="zh-CN" class="ie8" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"> <![endif]-->
<!--[if !IE]><!-->
<html lang="zh-cmn-Hans-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<!--<![endif]-->
<head th:replace="head :: common_header(~{::title},~{::link})">
    <title>庭审信息管理平台</title>
    <!-- ================== BEGIN PAGE LEVEL CSS STYLE ================== -->
    <link rel="stylesheet" th:href="@{/assets/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css}">
    <link rel="stylesheet" th:href="@{/assets/plugins/bootstrap-table/bootstrap-table.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/loading.css}">
    <link rel="stylesheet" th:href="@{/assets/css/play.css}"/>
    <!-- ================== END PAGE LEVEL CSS STYLE ================== -->
</head>
<body>

<!--loading 加载层-->
<div id="loading" style="z-index: 9999">
    <div id="loading-center">
        <div id="loading-center-absolute">
            <div class="object" id="object_four"></div>
            <div class="object" id="object_three"></div>
            <div class="object" id="object_two"></div>
            <div class="object" id="object_one"></div>
        </div>
    </div>
</div>
<!-- begin #page-container -->
<div id="page-container" class="page-container fade page-without-sidebar">
    <!-- begin #header -->
    <div th:replace="~{head.html :: head_nav_other(${session.user.realName},@{/archives/index},@{/archives/favorite})}"></div>
    <!-- end #header -->

    <!-- begin #content -->
    <div id="content" class="content">
        <!-- begin breadcrumb -->
        <ol class="breadcrumb cmp-breadcrumb">
            <li>
                <a th:href="@{/archives/index}"><i class="fa fa-home fa-lg fa-fw"></i><span class="context-span">&nbsp;主页</span></a>
            </li>
            <li>
                <a href="javascript:base.back();"><i class="fa  fa-arrow-left fa-lg"></i><span class="context-span">&nbsp;后退</span></a>
            </li>
            <li class="active">
                <a href="javascript:location.reload();"><i class="fa fa-refresh fa-fw nowrap"></i><span
                        class="context-span" id="title">&nbsp;原告.......</span></a>
            </li>
        </ol>
        <!-- end breadcrumb -->
        <div class="panel cmp-panel">
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-8 col-xs-12">
                        <div class="well">
                            <div class="vlc">
                                <object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
                                        width="100%"
                                        height="100%"
                                        id="vlc"
                                        events="True">
                                    <param name="MRL" value=""/>
                                    <param name="ShowDisplay" value="True"/>
                                    <param name="AutoLoop" value="False"/>
                                    <param name="AutoPlay" value="False"/>
                                    <param name="Volume" value="50"/>
                                    <param name="toolbar" value="true"/>
                                    <param name="StartTime" value="0"/>
                                    <EMBED pluginspage="http://www.videolan.org"
                                           type="application/x-vlc-plugin"
                                           version="VideoLAN.VLCPlugin.2"
                                           width="100%"
                                           height="100%"
                                           toolbar="false"
                                           bgcolor="white"
                                           loop="true"
                                           text="Waiting for video"
                                           name="vlc">
                                    </EMBED>
                                    <div id="pro_bar"></div>
                                    <!--<div style="  height: 20px; border: 0px solid #eee; margin:  -10px auto 0;">-->
                                    <!--<div style='float:left'>-->
                                    <!--<button type="button" class="btn btn-default btn-xs" id="playOrPause">-->
                                    <!--<span class="glyphicon glyphicon-play" aria-hidden="true"></span>-->
                                    <!--</button>-->
                                    <!--</div>-->
                                    <!--<div id="bg" style="height: 15px; padding-top: 5px;margin-top: 12px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;">-->
                                    <!--<div id="bgcolor" style="background: #5889B2;padding-top: -16px;margin-top: 0px; width: 0; height: 10px; border-radius: 5px;"></div> -->
                                    <!--<div id="bt" style=" height: 17px;-->
                                    <!--width: 17px;-->
                                    <!--background-color: #efefef;-->
                                    <!-- -webkit-border-radius: 2em;-->
                                    <!-- -moz-border-radius: 2em;-->
                                    <!--border-radius: 2em;-->
                                    <!--border: 1px solid #ccc;-->
                                    <!-- -webkit-box-shadow: 0px 0px 5px #ccc;-->
                                    <!-- -moz-box-shadow: 0px 0px 5px #ccc;-->
                                    <!--box-shadow: 0px 0px 5px #ccc;-->
                                    <!--position: absolute;-->
                                    <!--padding-top: -16px;-->
                                    <!--margin-top: -16px;-->
                                    <!--cursor: pointer;-->
                                    <!--position:relative;">-->
                                    <!--</div>-->
                                    <!--</div>-->
                                    <!--</div> -->
                                    <!--<div style="  height: 20px; border: 0px solid #eee; margin:  -10px auto 0;">-->
                                    <!--<div style='float:left'>-->
                                    <!--<button type="button" class="btn btn-default btn-xs" id="volControl">-->
                                    <!--<span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span>-->
                                    <!--</button>-->
                                    <!--</div>-->
                                    <!--<div id="volbg" style="height: 15px; padding-top: 5px;margin-top: 12px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;">-->
                                    <!--<div id="volbgcolor" style="background: #5889B2;padding-top: -16px;margin-top: 0px; width: 50%; height: 10px; border-radius: 5px;"></div> -->
                                    <!--<div id="volbt" style=" height: 17px;-->
                                    <!--width: 17px;-->
                                    <!--left:50%;-->
                                    <!--background-color: #efefef;-->
                                    <!-- -webkit-border-radius: 2em;-->
                                    <!-- -moz-border-radius: 2em;-->
                                    <!--border-radius: 2em;-->
                                    <!--border: 1px solid #ccc;-->
                                    <!-- -webkit-box-shadow: 0px 0px 5px #ccc;-->
                                    <!-- -moz-box-shadow: 0px 0px 5px #ccc;-->
                                    <!--box-shadow: 0px 0px 5px #ccc;-->
                                    <!--position: absolute;-->
                                    <!--padding-top: -16px;-->
                                    <!--margin-top: -16px;-->
                                    <!--cursor: pointer;-->
                                    <!--position:relative;">-->
                                    <!--</div>-->
                                    <!--</div>-->
                                    <!--</div> -->
                                    <!--<button type="button" class="btn btn-default btn-xs" id="fullScreen">-->
                                    <!--<span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>-->
                                    <!--</button>-->
                                    <!--<div id="info" style="text-align:center" >-:&#45;&#45;:&#45;&#45;/-:&#45;&#45;:&#45;&#45;</div>-->
                                </object>
                            </div>
                        </div>
                        <div style="margin-top:3px;">
                            <button class="btn btn-primary" data-toggle="button" onclick="catch1();" id="catch1">抓拍
                            </button>
                            <button class="btn btn-danger" data-toggle="button" onclick="start1();">截取起点</button>
                            <input type="text" style="width:130px;" id="startText"/>
                            <button class="btn btn-danger" data-toggle="button" onclick="end1();">截取终点</button>
                            <input type="text" style="width:130px;" id="endText"/>
                            <button class="btn btn-danger" data-toggle="button" onclick="subVideo();" id="subVideo">截取
                            </button>
                            <a class="btn btn-primary" href="image_video_load.html" id="imageLoad">截取图片/视频一览界面</a>
                        </div>
                    </div>
                    <div class="col-md-4 col-xs-12">
                        <div class="well">
                            <ul class="nav nav-tabs nav-court cmp-play-nav-tabs" role="tablist" id="nav-court">
                                <li role="presentation" id="_nav_court_info" class="active"><a
                                        href="javascript:void(0);"><span class="context-span context-white">案件信息</span></a>
                                </li>
                                <li role="presentation" id="_nav_court_note"><a href="javascript:void(0);"><span
                                        class="context-span context-white">笔录信息</span></a></li>
                                <li role="presentation" id="_nav_court_note_down" style="display: none"><a href=""
                                                                                                           download
                                                                                                           id="noteLoad"
                                                                                                           class="context-span context-white"><span>笔录下载</span></a>
                                </li>
                                <!--<li role="presentation" id="_nav_court_p"><a href="javascript:void(0);"><span>庭审成员</span></a></li>-->
                            </ul>
                            <div id="_court_info">
                                <div class="row">
                                    <div class="col-md-5 col-xs-12">
                                        <select title="点播通道" id="channels" class="form-control"></select>
                                    </div>
                                    <div class="col-md-5 col-xs-12">
                                        <select title="点播录像" id="videos" class="form-control"></select>
                                    </div>
                                    <div class="col-md-2 col-xs-12">
                                        <button class="btn  btn-sm btn-primary " id="download" onclick="down();">视频下载
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div id="_court_note" hidden="hidden">
                                <div class="row">
                                    <div class="col-md-12 col-xs-12" style="padding-top: 10px">
                                        <pre id="notetext" class="notetext"></pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 按钮触发模态框 -->
        <!-- 模态框（Modal） -->
        <div draggable="true" class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true" style="position:fixed;top:100px;background-color:white;width:25%;height:45%;left:70%;">
            <div class="modal-dialog" style="width:100%;margin:0px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times; </button>
                    </div>
                    <div class="modal-body" style="height:300px;">
                        <img alt="抓拍图片" src="" id="image" width="100%" height="100%">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </div>

        <!-- 视频下载模态框 -->
        <!-- 模态框（Modal） -->
        <div draggable="true" class="modal fade" id="download_video" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true" style="position:fixed;top:100px;background-color:white;width:25%;height:45%;left:70%;">
            <div class="modal-dialog" style="width:100%;margin:0px;">
                <div class="modal-content">
                    <div class="modal-header" style="color:blue;font-size:19px;">
                        点击文件名下载,或右击文件链接另存为
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times; </button>
                    </div>
                    <div class="modal-body" style="height:300px;text-align:center;overflow:auto;">
                        <!-- a标签展示区 -->
                        <table id="table" style="width:90%;"></table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </div>
    </div>

    <!-- end #content -->

    <!-- begin scroll to top btn -->
    <a href="javascript:;" class="btn btn-icon btn-circle btn-blue btn-scroll-to-top fade" data-click="scroll-top"><i
            class="fa fa-angle-up"></i></a>
    <!-- end scroll to top btn -->
</div>
<!-- ================== BEGIN BASE JS ================== -->
<div th:replace="head :: footer_js(~{::script})">
    <script type="text/javascript"
            th:src="@{/assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js}"></script>
    <script type="text/javascript"
            th:src="@{/assets/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js}"
            charset="UTF-8"></script>
    <script type="text/javascript" th:src="@{/assets/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
    <script type="text/javascript" th:src="@{/assets/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>
    <script type="text/javascript" th:src="@{/assets/plugins/echart/echarts.js}"></script>
    <script type="text/javascript" th:src="@{/assets/plugins/echart/shine.js}"></script>
    <script type="text/javascript" th:src="@{/assets/plugins/echart/macarons.js}"></script>
    <script type="text/javascript" th:src="@{/assets/plugins/icheck-1.0.2/icheck.min.js}"></script>
    <script type="text/javascript" th:src="@{/assets/plugins/jquery-ui/ui/minified/jquery-ui.min.js}"></script>
    <script type="text/javascript" th:src="@{/assets/plugins/cmp-progress-bar/cmp-progress-bar.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/vlc_load.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/ws_heart_beat.js}"></script>
    <script th:inline="javascript">
        var caseMap = [[${caseMap}]];
        var trialUid = [[${trialUid}]];

    </script>
    <script type="text/javascript" th:src="@{/assets/js/archives/play.js}"></script>
    <script>
        $(document).ready(function () {
            App.init();
        });
    </script>
</div>
<!-- ================== END PAGE LEVEL JS ================== -->
<!-- 缓存数据 -->
<input type="hidden" id="data">
<div id="videosData" style="display:none;"></div>
</body>
</html>